*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
  }
body{
  
    background: url(../images/bg.jpg)  no-repeat;
    .header{
        height: 1.25rem;
        background: url(../images/head_bg.png);
        position: relative;
        h1{
            font-size: 0.475rem;
            color: #fff;
            text-align: center;
            line-height: 1.25rem;
        }
        .data{
            position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7); 
        }
    }
    .content{
        display: flex;
        .content-lef-right{
            flex: 3;
            .panel {
                position: relative;
              
                height: 3.875rem;
                border: 1px solid rgba(25, 186, 139, 0.17);
                background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png);
                padding: 0 0.1875rem 0.5rem;
                margin-bottom: 0.1875rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
                &::before{
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-top: 2px solid #02a6b5;
                    border-left: 2px solid #02a6b5;

                }
                &::after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-top: 2px solid #02a6b5;
                    border-right: 2px solid #02a6b5;
                  }
                  .panel-footer {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    &::before {
                      position: absolute;
                      bottom: 0;
                      left: 0;
                      content: "";
                      width: 10px;
                      height: 10px;
                      border-bottom: 2px solid #02a6b5;
                      border-left: 2px solid #02a6b5;
                    }
                    &::after {
                      position: absolute;
                      bottom: 0;
                      right: 0;
                      content: "";
                      width: 10px;
                      height: 10px;
                      border-bottom: 2px solid #02a6b5;
                      border-right: 2px solid #02a6b5;
                    }
                  }
                  h2 {
                    height: 0.6rem;
                    line-height: 0.6rem;
                    text-align: center;
                    color: #fff;
                    font-size: 0.25rem;
                    font-weight: 400;
                  
                  }
                  .chart {
                    height: 3rem;
                   
                  }
                }
        }
        .content-content{
            flex: 5;
            padding: 0 10px 15px;
           
            .content-header{
                height: 1.875rem;
                background: rgba(101, 132, 226, 0.1);
                padding: 0.1875rem;
                .header-top{
                    height: 65%;
                    position: relative;
                    border: 1px solid rgba(25, 186, 139, 0.17);
                   
                    &::before{
                        position: absolute;
                        top: 0;
                        left: 0;
                        content: "";
                        width: 25px;
                        height: 21px;
                        border-top: 2px solid #02a6b5;
                        border-left:2px solid #02a6b5 ;
                    }
                    &::after{
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        content: "";
                        width: 21px;
                        height: 25px;
                        border-bottom: 2px solid #02a6b5;
                        border-right:2px solid #02a6b5 ;
                    }
                    .top-content{
                        
                        height: 100%;
                        margin: 0 auto;
                        display: flex;
                        align-items: center;
                       
                        .content-font{
                            width:50% ;
                            text-align: center;
                            font-family: electronicFont;
                           font-size: .5375rem;
                           color: #ffeb7b;
                           position: relative;
                           &:first-child::after{
                               position: absolute;
                               right: 0;
                               content: "";
                               width: 2px;
                               height: 30px;
                               background: rgba(255, 255, 255, 0.2);
                           }
                      
                        }

                    }
                }
               .header-bottom{
                   height: 35%;
                display: flex;
                align-items: center;
               
                .bottom-font{
                    width: 50%;
                    text-align: center;
                    font-size: .275rem;
                    color: white;
                }
                  
               }
            }
            .content-body{
                height: 10.125rem;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                #map{
                  width: 8.475rem;
                  height: 8.475rem;
                   
                }
                .map1,
                .map2,
                .map3 {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 6.475rem;
                  height: 6.475rem;
                  background: url(../images/map.png) no-repeat;
                  background-size: 100% 100%;
                  opacity: 0.3;
                }
                .map2 {
                  width: 8.0375rem;
                  height: 8.0375rem;
                  background-image: url(../images/lbx.png);
                  opacity: 0.6;
                  animation: rotate 15s linear infinite;
                  z-index: 2;
                }
                .map3 {
                  width: 7.075rem;
                  height: 7.075rem;
                  background-image: url(../images/jt.png);
                  animation: rotate1 10s linear infinite;
                }
              
                
                  @keyframes rotate {
                    from {
                      transform: translate(-50%, -50%) rotate(0deg);
                    }
                    to {
                      transform: translate(-50%, -50%) rotate(360deg);
                    }
                  }
                  @keyframes rotate1 {
                    from {
                      transform: translate(-50%, -50%) rotate(0deg);
                    }
                    to {
                      transform: translate(-50%, -50%) rotate(-360deg);
                    }
                  }

            }
            
        }
       
    }

}